<template>
  <div>
    <div class="topLocation">教练信息管理 / 教练图表</div>
    <h2 style="text-align: center; font-size: 24px;">教练类型报表</h2>
    <div id="profit-chart" style="width: 80%; height: 400px; margin: 0 auto;"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import axios from "axios";

export default {
  setup() {
    const chart = ref(null);

    const fetchProfitData = async () => {
      try {
        const maingongResponse = await axios.get('http://localhost:8080/coach/maingong');
        const mainfangResponse = await axios.get('http://localhost:8080/coach/mainfang');
        const gongfangResponse = await axios.get('http://localhost:8080/coach/gongfang');

        return [
          maingongResponse.data,
          mainfangResponse.data,
          gongfangResponse.data
        ];
      } catch (error) {
        console.error('Error fetching profit data:', error);
        // 使用示例数据
        return [10, 20, 30];
      }
    };

    const initChart = async () => {
      const data = await fetchProfitData();

      const option = {
        xAxis: {
          type: 'category',
          data: ['进攻为主','防守为主','攻防平衡'],
          axisLabel: { // 调整 x 轴标签文字样式
            fontSize: 16 // 设置 x 轴标签文字大小
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: { // 调整 y 轴标签文字样式
            fontSize: 16 // 设置 y 轴标签文字大小
          }
        },
        series: [
          {
            data: data,
            type: 'bar'
          }
        ]
      };

      chart.value.setOption(option);
    };

    onMounted(async () => {
      chart.value = echarts.init(document.getElementById('profit-chart'));
      await initChart();
    });

    return {};
  }
};
</script>

<style scoped>
.topLocation {
  font-size: 16px;
  font-weight: bold;
  color: #000; /* 文字颜色为黑色 */
  padding: 10px;
  border-bottom: 2px solid #000; /* 底部边框，黑色 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-start; /* 左对齐 */
  margin-bottom: 20px; /* 增加距离 */
  margin-top: 40px;
}

#profit-chart {
  text-align: center; /* 图表居中显示 */
}
</style>
